<template>
    <div class="fm-content">
        <span class="discovery-station">发现电台</span> 
        <span class="more">更多</span> 
    </div>
    <div>
        <van-swipe :loop="false" :show-indicators="false" :width="90" :height="160" >
                <van-swipe-item>
                    <div class="carousel">
                        <div>
                            <div class="carousel-item">
                                    <img src="../../images/p1.jpg">
                                    <h3>睡不着电台</h3>
                                    <p>陪你入睡</p>
                            </div>
                        </div>
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="carousel">
                            <div>
                                <div class="carousel-item">
                                        <img src="../../images/p2.jpg">
                                        <h3>贰玖故事</h3>
                                        <p>倾诉和分享者</p>
                                </div>
                            </div>
                        </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="carousel">
                            <div>
                                <div class="carousel-item">
                                        <img src="../../images/p4.jpg">
                                        <h3>舒小满</h3>
                                        <p>心理FM主播</p>
                                </div>
                            </div>
                        </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="carousel">
                            <div>
                                <div class="carousel-item">
                                        <img src="../../images/p3.jpg">
                                        <h3>大宸</h3>
                                        <p>催眠小故事</p>
                                </div>
                            </div>
                        </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="carousel">
                            <div>
                                <div class="carousel-item">
                                        <img src="../../images/p5.jpg">
                                        <h3>若为</h3>
                                        <p>心理FM主播</p>
                                </div>
                            </div>
                        </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="carousel">
                            <div>
                                <div class="carousel-item">
                                        <img src="../../images/p6.jpg">
                                        <h3>ikun</h3>
                                        <p>唱跳rap🏀Music</p>
                                </div>
                            </div>
                        </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="carousel">
                            <div>
                                <div class="carousel-item">
                                        <img src="../../images/p7.jpg">
                                        <h3>吕小布</h3>
                                        <p>天使与你同在，你本来就很美</p>
                                </div>
                            </div>
                        </div>
                </van-swipe-item>
            <van-swipe-item>
                  <div class="carousel">
                        <div>
                            <div class="carousel-item">
                                    <img src="../../images/p8.jpg">
                                    <h3>鸡哥电台</h3>
                                    <p>洗涤你的心灵</p>
                            </div>
                        </div>
                    </div>
            </van-swipe-item>
            <van-swipe-item class="swipe-item-last"></van-swipe-item>
        </van-swipe>
    </div>
</template>


<script>
    export default{
         data(){
            return {
                carouselData:[
                    {
                        imgUrl:'/src/images/p1.jpg',
                        title:'睡不着电台',
                        description:'陪你入睡'
                    },
                     {
                        imgUrl:'/src/images/p2.jpg',
                        title:'贰玖故事',
                        description:'倾诉和分享者' 
                    }, {
                        imgUrl:'/src/images/p3.jpg',
                        title:'大宸',
                        description:'催眠小故事'
                    }, {
                        imgUrl:'/src/images/p4.jpg',
                        title:'舒小满',
                        description:'心理FM主播'
                    }, {
                        imgUrl:'/src/images/p5.jpg',
                        title:'若为',
                        description:'心理FM主播'
                    }, {
                        imgUrl:'/src/images/p6.jpg',
                        title:'ikun',
                        description:'唱跳rap🏀Music'
                    }, {
                        imgUrl:'/src/images/p7.png',
                        title:'吕小布',
                        description:'天使与你同在，你本来就很美'
                    }, 
                    {
                        imgUrl:'/src/images/p2.jpg',
                        title:'鸡哥电台',
                        description:'洗涤你的心灵'
                    },
                ]
            }
         }
    }




</script>



<style scoped>
.fm-content{
    margin-top:35px;
    width:100%;
    height:15px;
    /* border:1px solid black; */
}
.discovery-station{
     float: left;
    margin-left: calc(50% - 30px);
    font-size:15px;
    line-height:15px;
    font-weight: bold;
}
.more{
    font-size:12px;
    line-height:15px;
    color:gray;
    float:right;
    margin-right: 15px;
}


 .van-swipe-item{
    border-radius: 15px;
    box-shadow:rgb(246, 246, 246) 0px 0px 3px 3px;
     margin-left:5px;
     margin-right:5px;
 }
 .carousel img{
    width:60px;
    border-radius:50%;
    height:auto;
    overflow: hidden;
    margin-left:14px;
    margin-top:20px;
}
.carousel h3{
    font-size:15px;
    width:75px;
    margin-top:15px;
    text-align: center;
    margin-left:6.5px;
}
.carousel p{
    font-size:12px;
    margin-top:10px;
    text-align: center;
}
.swipe-item-last{
    display:none;
}
</style>